<template>
  <div class="team-page">
    <a-breadcrumb>
      <a-breadcrumb-item> <a href="/home">首页</a></a-breadcrumb-item>
      <a-breadcrumb-item><a href="">班组管理</a></a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="查询条件" style="width: 100%;">
      <a-form
        ref="formRef"
        name="horizontal_login"
        layout="inline"
        autocomplete="off"
      >
        <a-form-item label="名称" name="name">
          <a-input v-model:value="name" name="name"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button  type="primary" html-type="submit" @click="pageQuery">查询</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
      <div style="margin-top:12px;">
        <a-button type="primary" @click="gotoAddPage" size="small">
          添加
        </a-button> &nbsp;&nbsp;
        <a-button size="small">
          修改
        </a-button>&nbsp;&nbsp;
        <a-button size="small">
          删除
        </a-button>&nbsp;&nbsp;
      </div>
    </a-card>
    <team-table  ref="tableCompontent"></team-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TeamTable from './team-table.vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'team',
  data () {
    const store = useStore()
    console.log('store', store)
    return {
      name: null
    }
  },
  components: {
    TeamTable
  },
  methods: {
    gotoAddPage () {
      this.$router.push('/team/team/form')
    },
    pageQuery () {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      this.$refs.tableCompontent && this.$refs.tableCompontent.pageQuery(this.name)
    },
    resetForm () {
      this.name = null
    }
  }
})
</script>

<style scoped lang="less">

</style>
